<template>
  <h1>开关组件</h1>
<!--  开关组件默认由Boolean类型来控制开关的true打开，false关闭-->
<!--  还支持active-value和inactive-value来控制自定义打开和关闭的状态
额外支持string与number类型 -->
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <hr>
  是否是管理员：<el-switch v-model="isAdmin"></el-switch>
  是否显示图片：<el-switch v-model="isShow"></el-switch>
  <hr>
  <img src="mwzz.png" width="200px" v-show="isShow">
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="numStr" :active-value="'开'" :inactive-value="'关'"></el-switch>
  <el-switch v-model="str" active-value="aa" inactive-value="bb"></el-switch>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(true);
const value2 = ref(true);
const isAdmin = ref(true);
const isShow = ref(false);
const num=ref(1);
const numStr=ref('关');
const str=ref('aa');

</script>

<style scoped>

</style>